<template>
    <div class="box-padding">
        <div class="role-title">{{ $route.params.name }}</div>
        <Row :gutter="16">
            <Col span="4">
                <Select v-model="projectId" :disabled="list.length > 0 || $route.query.proId!=''" placeholder="项目名称" label-in-value @on-change="projectSelect">
                    <Option v-for="item in projects" :value="item.id" :key="item.id">{{ item.shortName }}</Option>
                </Select>
            </Col>
            <Col span="8">
                <Input v-model="listing" placeholder="动态清单名称" readonly />
            </Col>
            <Col span="8">
                <Button type="primary" @click="projectId ? isLastMonth = !isLastMonth : $Message.warning('请先选择项目'),$refs.lastMonth.setProjectId()">上月动态管控表选择</Button>
                <Button style="margin-left:15px;" type="primary" @click="projectId ? isNextMonth = !isNextMonth : $Message.warning('请先选择项目'),$refs.nextMonth.setProjectId()">下月在施风险选择</Button>
            </Col>
            <!-- <Col span="4">
                
            </Col> -->
            <Col span="4" style="text-align:right;">
                <Button type="primary" @click="addRow">新增一行</Button>
            </Col>
        </Row>
        <Table class="table" border disabled-hover :columns="columns" :data="list" no-data-text="暂无数据" style="margin-top:20px;">
            <template slot-scope="{ row, index }" slot="operation">
                <!-- <a @click="emptyData(index)" style="margin-right:10px;">清空</a> -->
                <a v-if="row.isFou == '否'" @click="plan(row, index)" style="margin-right:10px;">方案制定</a>
                <a v-else style="margin-right:10px; color:#ccc;">方案制定</a>
                <a @click="addInnerRow(row, index)" style="margin-right:10px;">下加行</a>
                <a v-if="row.constructionPointId && row.riskOperationId" @click="row.currentSaftyControlOfTheRisk = row.riskOperationDtoList ? row.riskOperationDtoList[0].riskControlDetailOne : '',
                                                                                row.engineeringCompanyRegulatoryRequirements = row.riskOperationDtoList ? row.riskOperationDtoList[0].riskControlRequirementOne : '',
                                                                                detailObj=row,itemModal = !itemModal,$refs.tab5.setData(),$refs.tab4.setData()" style="margin-right:10px;">详情</a>
                <a @click="initRemoveRow(index)">删除</a>
            </template>
        </Table>
        <div style="text-align:center;margin-top:20px;">
            <Button type="primary" @click="save">确定</Button>
            <Button style="margin-left: 20px;" @click="closeTab">取消</Button>
        </div>
        <Modal v-model="itemModal" title="动态详情" width="70%" class="modal" :footer-hide="true">
            <div class="modal-content">
                <Tabs value="name1">
                    <TabPane label="风险详情" name="name1">
                        <tab4 ref="tab4" :detailObj="detailObj"></tab4>
                    </TabPane>
                    <TabPane label="方案信息" name="name2">
                        <tab5 :detailObj="detailObj" ref="tab5"></tab5>
                    </TabPane>
                </Tabs>
            </div>
        </Modal>
        <Modal v-model="modal" title="工点选择" width="70%" height="70%" class="modal" :footer-hide="true">
            <div class="modal-content">
                <gongdian :projectName="projectName" :projectIds="projectId" @isGongdian="isGongdian" @gongObj="gongObj"></gongdian>
            </div>
        </Modal>
        <Modal v-model="isLastMonth" title="动态管控表选择" width="80%" :footer-hide="true">
            <div class="modal-content">
                <lastMonth :projectIds="projectId"  ref="lastMonth" @isLastMonthMethods="isLastMonthMethods" @addList="addList"></lastMonth>
            </div>
        </Modal>
        <Modal v-model="isNextMonth" title="下月在施风险选择" width="80%" :footer-hide="true">
            <div class="modal-content">
                <nextMonth :projectName="projectName" :projectIds="projectId" ref="nextMonth" @isNextMonthMethods="isNextMonthMethods" @addList="addList"></nextMonth>
            </div>
        </Modal>
        <Modal v-model="isPlan" title="方案制定" width="80%" :footer-hide="true">
            <div class="modal-content">
                <plan @isPlanMethods="isPlanMethods" :projectIds="projectId" ref="planobj" @isPlanObj="isPlanObj" :planRow="planRow" :dynamicRiskOrderId="dynamicRiskOrderId" :riskOperationId="riskOperationId" :source="source" :pointId="pointId"></plan>
            </div>
        </Modal>
        <Modal v-model="dynamicLledgerModel" title="风险内容选择" width="70%" class="modal" :footer-hide="true">
            <div class="modal-content">
                <dynamicLledger :riskType="riskType" :projectId="projectId" :jgId="jgId" @isdynamicLledger="isdynamicLledger" @ledgerObj="ledgerObj" ref="dynamicLledger"></dynamicLledger>
            </div>
        </Modal>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
import plan from '../plan/plan-tab'
import lastMonth from '../dynamics-monthly/last-month'
import nextMonth from '../dynamics-monthly/next-month'
import tab4 from './detail-tab-month/tab4'
import tab5 from './detail-tab-month/tab5'
import dynamicLledger from '../../ledger-query/DynamicLledger'
import gongdian from './detail-tab-month/gongdian'
export default {
    name:'dynamics-add',
    components: {
        tab4,
        tab5,
        plan,
        lastMonth,
        nextMonth,
        dynamicLledger,
        gongdian
    },
    data(){
        return{
            projectId:'',
            list:[],
            listing:'',
            isLastMonth:false,
            isNextMonth:false,
            isPlan: false,
            modal:false,
            dynamicLledgerModel:false,
            itemModal:false,
            riskType: true,
            jgId: '',
            detailObj:{},
            projectName:'',
            projects:[],
            dynamicRiskOrderId:'',
            riskOperationId:'',
            planIndex:'',
            isSave:true,
            planRow:{},
            // 风险等级
            riskLevels: [
                { text: 'I级', value: 1 },
                { text: 'II级', value: 2 },
                { text: 'III级', value: 3 },
                { text: 'IV级', value: 4 }
            ],
            columns: [
                {
                    type: 'index',
                    width: 70,
                    align: 'center',
                    title: '序号'
                },
                {
                    title: '工点名称',
                    key: 'constructionPointName',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row
                        const temp = row.constructionPointId ? [h('span',{},params.row.constructionPointName)] : [
                            h('span',
                                {
                                    style: {
                                        color: '#0099FF',
                                        fontSize: '13px',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.initSelectWork(params.index)
                                        }
                                    }
                                },
                                '选择内容'
                            )
                        ]
                        return h('div', temp)
                    }
                },
                {
                    title: '工点风险等级',
                    key: 'pointRiskGradeName',
                    align: 'center'
                },
                {
                    title: '当月是否作业',
                    key: 'isWork',
                    align: 'center'
                },
                {
                    title: '作业风险名称',
                    key: 'riskName',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row
                        const temp = row.riskOperationId || row.riskOperationName ? 
                            [h('span',{},params.row.riskName)] : [h('span',
                                {
                                    style: {
                                    color: '#0099FF',
                                    fontSize: '13px',
                                    cursor: 'pointer'
                                },
                                on: {
                                    click: () => {
                                        this.initSelectRisk(params.index)
                                    }
                                }
                            },'选择内容')
                        ]
                        return h('div', temp)
                    }
                },
                {
                    title: '作业风险类别',
                    align: 'center',
                    key: 'riskCategoryIds',
                    render: (h, params) => {
                        const row = params.row
                        const temp = row.riskCategoryIds.length > 0 ? 
                            [h('span',{},params.row.riskCategoryNames)] : [h('Select',
                                {
                                    props: {
                                        value: params.row.riskCategoryIds,
                                        size: 'small',
                                        transfer: true,
                                        multiple: true
                                    },
                                    on: {
                                        'on-change': e => {
                                            this.list[params.row._index].riskCategoryIds = e
                                        }
                                    }
                            },
                            this.riskCategories.map(item => {
                                return h('Option', {
                                    props: {
                                        value: item.id,
                                        label: item.riskCategoryName
                                    }
                                })
                            }))
                        ]
                        return h('div', temp)
                    }
                },
                {
                    title: '作业风险等级',
                    align: 'center',
                    key: 'riskLevel',
                    render: (h, params) => {
                        const row = params.row
                        const temp = row.riskLevel ? 
                            [h('span',{},params.row.riskLevelName)] : [h('Select',
                                {
                                    props: {
                                        value: params.row.riskLevel,
                                        size: 'small',
                                        transfer: true
                                    },
                                    on: {
                                        'on-change': e => {
                                            this.list[params.row._index].riskLevel = e
                                        }
                                    }
                            },
                            this.riskLevels.map(item => {
                                return h('Option', {
                                    props: {
                                        value: item.value,
                                        label: item.text
                                    }
                                })
                            }))
                        ]
                        return h('div', temp)
                    }
                },
                {
                    title: '方案是否制定',
                    align: 'center',
                    key: 'isFou',
                    render:(h, params) =>{
                        if(params.row.isFou == '是'){
                            return h('span',{
                                style:{
                                    color:'green'
                                }
                            },params.row.isFou)
                        }else{
                            return h('span',{
                                style:{
                                    color:'red'
                                }
                            },params.row.isFou)
                        }
                    }
                },
                {
                    title: '操作',
                    slot: 'operation',
                    align: 'center',
                    className: 'table--operation'
                }
            ],
            obj:{
                projectId:'',
                projectName:'',
                pointId:'',
                pointName:'',
                constructionPointId:'',
                constructionPointName:'',
                riskCategoryIds:[],
                riskCategoryName:'',
                riskLevel:'',
                isWork:'',
                riskOperationId:'',
                riskOperationName:'',
                riskLevelName:'',
                isWorkedThisMonthName:'',
                pointRiskGradeName:'',
                source:'next',
                riskOperationDtoList:[]
            },
            gdIndex:'',
            currentRow:'',
            currentRiskRow:'',
            source:'',
            pointId:'',
            lists:[]
        }
    },
    mounted(){
        if (this.$route.query.proId) {
            this.projectId = this.$route.query.proId
        }
        this.jgId = this.$route.params.id
        this.initProjects()
        this.initRiskCategories()
    },
    methods:{
        // 清空单行数据
        emptyData(index){
            for(let key in this.list[index]){
                this.list[index][key] = ''
            }
        },
        // 下家一行
        addInnerRow(row, index) {
            this.currentRow = index + 1
            let copy = JSON.parse(JSON.stringify(row))
            copy.riskOperationId = ''
            copy.riskCategoryIds = []
            copy.riskName = ''
            copy.riskOperationName = ''
            copy.riskLevel = ''
            copy.classificationMethodId = ''
            copy.isFou = '否'
            copy.riskOperationDtoList = []
            this.list.splice(index + 1, 0, copy)
        },
        ledgerObj(obj) {
            let rowObj = this.list[this.currentRiskRow]
            this.list.splice(this.currentRiskRow,1)
            obj.forEach((e,index)=>{
                let temp = JSON.parse(JSON.stringify(rowObj))
                this.list.splice((this.currentRiskRow+index),0,temp)
            })
            obj.forEach((e,i)=>{
                this.list[this.currentRiskRow+ i].riskOrderId = obj[i].id
                this.list[this.currentRiskRow+ i].riskOperationId = obj[i].riskOperationId
                this.list[this.currentRiskRow+ i].riskOperationName = obj[i].riskName
                this.list[this.currentRiskRow+ i].riskCategoryIds = obj[i].riskCategoryIds.split(',')
                this.list[this.currentRiskRow+ i].riskCategoryNames = obj[i].riskCategoryNames
                this.list[this.currentRiskRow+ i].riskLevel = obj[i].riskLevel
                this.list[this.currentRiskRow+ i].riskName = obj[i].riskName
                this.list[this.currentRiskRow+ i].riskLevelName = obj[i].riskLevelName
            })
            // obj.forEach((e,index)=>{
            //     this.list.forEach(a=>{
            //         if(e.constructionPointId == a.pointId && e.riskOperationId == a.riskOperationId){
            //             obj.splice(index,1)
            //         }
            //     })
            // })
            // if(obj.length > 0){
            //     let rowObj = this.list[this.currentRiskRow]
            //     this.list.splice(this.currentRiskRow,1)
            //     obj.forEach((e,index)=>{
            //         let temp = JSON.parse(JSON.stringify(rowObj))
            //         this.list.splice((this.currentRiskRow+index),0,temp)
            //     })
            //     obj.forEach((e,i)=>{
            //         this.list[this.currentRiskRow+ i].riskOrderId = obj[i].id
            //         this.list[this.currentRiskRow+ i].riskOperationId = obj[i].riskOperationId
            //         this.list[this.currentRiskRow+ i].riskOperationName = obj[i].riskName
            //         this.list[this.currentRiskRow+ i].riskCategoryIds = obj[i].riskCategoryIds.split(',')
            //         this.list[this.currentRiskRow+ i].riskCategoryNames = obj[i].riskCategoryNames
            //         this.list[this.currentRiskRow+ i].riskLevel = obj[i].riskLevel
            //         this.list[this.currentRiskRow+ i].riskName = obj[i].riskName
            //         this.list[this.currentRiskRow+ i].riskLevelName = obj[i].riskLevelName
            //     })
            // }
        },
        ...mapMutations(['closeTag']),
        // 删除
        initRemoveRow(index){
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确认删除当前项吗？</p>',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    this.list.splice(index, 1)
                }
            })
        },
        // 新增一行
        addRow(){
            if (!this.projectId) {
                this.$Message.error('请选择项目')
                return
            }
            this.list.push(this.obj)
        },
        // 工点名称选择
        initSelectWork(index) {
            this.modal = true
            this.gdIndex = index
        },
        // 作业风险名称选择
        initSelectRisk(index) {
            if (!this.list[index].constructionPointId) {
                this.$Message.error('请先选择工点')
                return
            }
            this.dynamicLledgerModel = true
            this.riskModal = true
            this.$refs.dynamicLledger.parentSetData()
            this.currentRiskRow = index
        },
        // 关闭工点
        isGongdian(str){
            this.modal = str
        },
        gongObj(obj){
            // let ob = []
            // obj.forEach(e=>{
            //     let temp = JSON.parse(JSON.stringify(e))
            //     ob.push(temp)
            // })
            // obj.forEach((e,index)=>{
            //     console.log(index)
            //     this.list.forEach(a=>{
            //         if(e.pointId == a.pointId && e.riskOperationName == a.riskOperationName){
            //             console.log(e.pointId)
            //             console.log(a.pointId)
            //             console.log(e.riskOperationName)
            //             console.log(a.riskOperationName)
            //             ob.splice(index,1)
            //         }
            //     })
            // })
            // console.log(ob)
            this.list.splice(this.gdIndex, 1, ...obj)
        },
        // 作业风险名称框关闭
        isdynamicLledger(str) {
            this.dynamicLledgerModel = str
        },
        // 方案制定plan框关闭
        isPlanMethods(str) {
            this.isPlan = str
        },
        // 关闭lastmonth框
        isLastMonthMethods(str) {
            this.isLastMonth = str
        },
        isNextMonthMethods(str) {
            this.isNextMonth = str
        },
        // 方案制定跳转
        plan(row, index) {
            this.lists = this.list
            this.pointId = row.pointId
            this.source = row.source
            if(row.constructionPointId && row.riskCategoryIds.length > 0){
                this.planIndex = index
                this.dynamicRiskOrderId = row.riskOrderId
                this.riskOperationId = row.riskOperationId
                this.isPlan = !this.isPlan
                if(row.isFou == '是'){
                    this.planRow = row.riskOperationDtoList[0]
                    this.$refs.planobj.rowSetObj()
                }else{
                    this.$refs.planobj.measuresNewId()
                }
            }else{
                this.$Message.warning('工点或者风险名称不能为空')
            }
        },
        // 拼接数据
        isPlanObj(obj) {
            obj = JSON.parse(obj)
            let list = this.list
            obj.riskOrderId = list[this.planIndex].riskOrderId
            obj.constructionPointId = list[this.planIndex].pointId
            obj.riskOperationId = list[this.planIndex].riskOperationId
            obj.riskOperationName = list[this.planIndex].riskOperationName
            obj.riskCategoryIds = list[this.planIndex].riskCategoryIds.join(',')
            obj.riskCategoryNames = list[this.planIndex].riskCategoryNames
            obj.riskLevel = list[this.planIndex].riskLevel
            obj.riskLevelName = ''
            obj.classificationMethodId = list[this.planIndex].classificationMethodId
            obj.classificationMethodName = list[this.planIndex].classificationMethodName
            obj.riskDescription = list[this.planIndex].riskDescription
            obj.riskControlRequirementTwo = ''
            list[this.planIndex].riskOperationDtoList = []
            list[this.planIndex].riskOperationDtoList.push(obj)
            if (list[this.planIndex].riskOperationDtoList.length > 0) {
                this.list[this.planIndex].isFou = '是'
            }else{
                this.list[this.planIndex].isFou = '否'
            }
            this.list = []
            list.forEach(e=>{
                this.list.push(e)
            })
        },
        // 设置list的值
        addList(list) {
            // if(this.list.length > 0){
            //     list.forEach(e=>{
            //         this.list.forEach(a => { 
            //             if(e.pointId == a.pointId && e.riskOperationName == a.riskOperationName){
                            
            //             }else{
            //                 if (!e.constructionPointName) {
            //                     e.constructionPointName = e.pointName
            //                     e.constructionPointId = e.pointId
            //                     e.constructionLevelName = e.riskLevelName
            //                 } else {
            //                     e.constructionLevelName = e.constructionPointRiskLevelName
            //                 }
            //                 e.isWork = e.isWorkedThisMonth
            //                 if (e.riskOperationDtoList && e.riskOperationDtoList.length > 0) {
            //                     e.isFou = '是'
            //                 }else{
            //                     e.isFou = '否'
            //                 }
            //                 e.classificationMethodId = e.classificationMethodId
            //                 e.riskName = e.riskOperationName
            //                 e.riskOperationNames = e.riskOperationName
            //                 e.riskCategoryIds = e.riskCategoryIds.split(',')
            //                 this.list.push(e)
            //             }
            //         })
            //     })
            // }else{
            //     list.forEach(e=>{
            //         if (!e.constructionPointName) {
            //             e.constructionPointName = e.pointName
            //             e.constructionPointId = e.pointId
            //             e.constructionLevelName = e.riskLevelName
            //         } else {
            //             e.constructionLevelName = e.constructionPointRiskLevelName
            //         }
            //         e.isWork = e.isWorkedThisMonth
            //         if (e.riskOperationDtoList && e.riskOperationDtoList.length > 0) {
            //             e.isFou = '是'
            //         }else{
            //             e.isFou = '否'
            //         }
            //         e.classificationMethodId = e.classificationMethodId
            //         e.riskName = e.riskOperationName
            //         e.riskOperationNames = e.riskOperationName
            //         e.riskCategoryIds = e.riskCategoryIds.split(',')
            //         e.source = e.source
            //         this.list.push(e)
            //     })
            // }
            list.forEach(e=>{
                if (!e.constructionPointName) {
                    e.constructionPointName = e.pointName
                    e.constructionPointId = e.pointId
                    e.constructionLevelName = e.riskLevelName
                } else {
                    e.constructionLevelName = e.constructionPointRiskLevelName
                }
                e.isWork = e.isWorkedThisMonth
                if (e.riskOperationDtoList && e.riskOperationDtoList.length > 0) {
                    e.isFou = '是'
                }else{
                    e.isFou = '否'
                }
                e.classificationMethodId = e.classificationMethodId
                e.riskName = e.riskOperationName
                e.riskOperationNames = e.riskOperationName
                e.riskCategoryIds = e.riskCategoryIds.split(',')
                e.source = e.source
                this.list.push(e)
            })
        },
        // 动态清单生成
        projectSelect(data) {
            let nowDate = new Date()
            let systemDate = 
                nowDate.getFullYear() + '年' + (nowDate.getMonth() + 1) +'月' +
                (nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate()) + '日'
            this.listing = data.label + systemDate + '动态清单'
            this.projectName = data.label
        },
        // 获取风险类型
        initRiskCategories() {
            this.$api.measuresLibrary.getRiskCategoryFindAll().then(({ code, data }) => {
                if (code === 200) {
                    this.riskCategories = data
                }
            })
        },
        //获取项目列表
        initProjects() {
            this.$api.riskIdentification.getByOrgTreeObjectIdcc(this.$route.params.id).then(res => {
                if (res.code === 200) {
                    res.data.forEach(e => {
                        if (e.id == this.$route.query.proId) {
                            let nowDate = new Date()
                            let systemDate = nowDate.getFullYear() + '年' + (nowDate.getMonth() + 1) +
                                '月' + (nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate()) + '日'
                            this.listing = e.shortName + systemDate + '动态清单'
                            this.projectName = e.shortName
                        }
                    })
                    this.projects = res.data
                } else {
                    this.$Message.warning(res.message)
                }
            })
        },
        // 保存
        save(){
            // 校验
            if (!this.projectId) {
                this.$Message.error('未选择项目')
                return
            }
            if (this.list.length === 0) {
                this.$Message.error('列表不能为空')
                return
            }
            for(let i = 0; i < this.list.length; i++){
                if(this.list[i].riskOperationDtoList == undefined || this.list[i].riskOperationDtoList == ''){
                    this.$Message.error('方案措施不能为空！')
                    this.isSave = false
                    break
                }else{
                    this.isSave = true
                }
            }
            if(this.isSave){
                this.$api.MonthlyDynamics.dynamicRiskOrderAdd(this.list).then(resp => {
                    if (resp.code == 200) {
                        this.$Message.success('新增成功')
                        this.closeTag({
                            name: 'dynamics-add',
                            params: { ...this.$route.params },
                            query: { ...this.$route.query }
                        })
                    } else {
                        this.$Message.warning(resp.message)
                    }
                })
            }
        },
        // 关闭页签
        closeTab() {
            this.closeTag({
                name: 'dynamics-add',
                params: { ...this.$route.params },
                query: { ...this.$route.query }
            })
        }
    }
}
</script>